import React from 'react'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { TabBar, Toast } from 'antd-mobile'
import { useNavigate, useLocation } from 'react-router-dom'
type Props = {}


export default function Mytabbar({ }: Props) {
    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/car',
            title: '购物车',
            icon: <UnorderedListOutline />,
        },
        {
            key: localStorage.getItem('token') ? '/mine' : '/login',
            title: localStorage.getItem('token') ? '我的' : '登录',
            icon: localStorage.getItem('token') ? <MessageFill /> : <UserOutline />,
        },
    ]

    const navigate = useNavigate();
    const location = useLocation();
    // 获取当前的路径path
    const { pathname } = location
    // 点击跳转页面事件
    const setRouteActive = (value: string) => {

        console.log('value', value);



        // 判断 当用户登录后, 才能跳转到购物车页面,否则提示直接到登录页
        if (value == '/car') {
            if (localStorage.getItem('token')) {
                navigate(value)
            } else {
                //
                Toast.show({
                    content: '请先登录',
                    duration: 1000,
                    afterClose: () => {
                        // 跳转到登录页
                        navigate('/login')
                    },
                })
            }
        } else {
            // 实现路由跳转的方式
            navigate(value)
        }
    }
    return (
        <div style={{ position: 'fixed', left: 0, bottom: 0, right: 0, background: 'white' }}>
            <TabBar safeArea={true} activeKey={pathname} onChange={value => setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}